<template>
  <div>
    <!-- 经典案例 -->
    <!-- nav -->
    <whiteNav></whiteNav>
    <!-- 大logo -->
    <div><img src="../assets/image/经典典案例.png" alt="" /></div>
    <!-- 全部列表 -->
    <div class="cases-biglist">
      <!-- 上部列表 -->
      <div class="alllist-top">
        <!-- 循环 -->
        <div
          @click="handleAllList(index)"
          :class="[isalllistActive == index ? 'alllist-item-active' : '']"
          class="alllist-item"
          v-for="(item, index) in alllist"
          :key="index"
        >
          {{ item.name }}
        </div>
      </div>
      <!-- 下部图文 -->
      <div class="alllist-bottom">
        <div class="alllist-bottom-tuwen">
          <div class="tuwen-box">
            <img src="../assets/image/案例图片.png" alt="" />
          </div>
          <div class="tuwen-info">
            <div class="info-left">
              <img src="../assets/image/小球.png" alt="" />
            </div>
            <div class="info-right">
              <div class="info-right-title">{{ $t("inforighttitle") }}</div>
              <div class="info-right-article single-ellipsis">
                {{ $t("inforightarticle") }}
              </div>
            </div>
          </div>
        </div>
        <div class="alllist-bottom-tuwen">
          <div class="tuwen-box">
            <img src="../assets/image/案例图片.png" alt="" />
          </div>
          <div class="tuwen-info">
            <div class="info-left">
              <img src="../assets/image/小球.png" alt="" />
            </div>
            <div class="info-right">
              <div class="info-right-title">{{ $t("inforighttitle") }}</div>
              <div class="info-right-article single-ellipsis">
                {{ $t("inforightarticle") }}
              </div>
            </div>
          </div>
        </div>
        <div class="alllist-bottom-tuwen">
          <div class="tuwen-box">
            <img src="../assets/image/案例图片.png" alt="" />
          </div>
          <div class="tuwen-info">
            <div class="info-left">
              <img src="../assets/image/小球.png" alt="" />
            </div>
            <div class="info-right">
              <div class="info-right-title">{{ $t("inforighttitle") }}</div>
              <div class="info-right-article single-ellipsis">
                {{ $t("inforightarticle") }}
              </div>
            </div>
          </div>
        </div>
        <div class="alllist-bottom-tuwen">
          <div class="tuwen-box">
            <img src="../assets/image/案例图片.png" alt="" />
          </div>
          <div class="tuwen-info">
            <div class="info-left">
              <img src="../assets/image/小球.png" alt="" />
            </div>
            <div class="info-right">
              <div class="info-right-title">{{ $t("inforighttitle") }}</div>
              <div class="info-right-article single-ellipsis">
                {{ $t("inforightarticle") }}
              </div>
            </div>
          </div>
        </div>
        <div class="alllist-bottom-tuwen">
          <div class="tuwen-box">
            <img src="../assets/image/案例图片.png" alt="" />
          </div>
          <div class="tuwen-info">
            <div class="info-left">
              <img src="../assets/image/小球.png" alt="" />
            </div>
            <div class="info-right">
              <div class="info-right-title">{{ $t("inforighttitle") }}</div>
              <div class="info-right-article single-ellipsis">
                {{ $t("inforightarticle") }}
              </div>
            </div>
          </div>
        </div>
        <div class="alllist-bottom-tuwen">
          <div class="tuwen-box">
            <img src="../assets/image/案例图片.png" alt="" />
          </div>
          <div class="tuwen-info">
            <div class="info-left">
              <img src="../assets/image/小球.png" alt="" />
            </div>
            <div class="info-right">
              <div class="info-right-title">{{ $t("inforighttitle") }}</div>
              <div class="info-right-article single-ellipsis">
                {{ $t("inforightarticle") }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 客户群体 -->
    <div class="groups">
      <div class="groups-title text-center">{{ $t("groupstitle") }}</div>
      <div class="groups-subtitle text-center">{{ $t("groupssubtitle") }}</div>
      <!-- 图标展示盒子 -->
      <div class="iconshow">
        <!-- 政府类 -->
        <div class="gover">
          <div class="gover-title mt-20 mb-20">{{ $t("govertitle") }}</div>
          <div class="gover-list">
            <div class="gover-item">
              <div class="gover-item-logo">
                <img src="../assets/image/合作客户logo.png" alt="" />
              </div>
              <div class="gover-item-text">{{ $t("goveritemtext") }}</div>
            </div>
            <div class="gover-item">
              <div class="gover-item-logo">
                <img src="../assets/image/合作客户logo.png" alt="" />
              </div>
              <div class="gover-item-text">{{ $t("goveritemtext") }}</div>
            </div>
            <div class="gover-item">
              <div class="gover-item-logo">
                <img src="../assets/image/合作客户logo.png" alt="" />
              </div>
              <div class="gover-item-text">{{ $t("goveritemtext") }}</div>
            </div>
            <div class="gover-item">
              <div class="gover-item-logo">
                <img src="../assets/image/合作客户logo.png" alt="" />
              </div>
              <div class="gover-item-text">{{ $t("goveritemtext") }}</div>
            </div>
          </div>
        </div>
        <!-- 电商 -->
        <div class="gover">
          <div class="gover-title mt-20 mb-20">{{ $t("dianshangtitle") }}</div>
          <div class="gover-list">
            <div class="gover-item">
              <div class="gover-item-logo">
                <img src="../assets/image/合作客户logo.png" alt="" />
              </div>
              <div class="gover-item-text">{{ $t("goveritemtext") }}</div>
            </div>
            <div class="gover-item">
              <div class="gover-item-logo">
                <img src="../assets/image/合作客户logo.png" alt="" />
              </div>
              <div class="gover-item-text">{{ $t("goveritemtext") }}</div>
            </div>
            <div class="gover-item">
              <div class="gover-item-logo">
                <img src="../assets/image/合作客户logo.png" alt="" />
              </div>
              <div class="gover-item-text">{{ $t("goveritemtext") }}</div>
            </div>
            <div class="gover-item">
              <div class="gover-item-logo">
                <img src="../assets/image/合作客户logo.png" alt="" />
              </div>
              <div class="gover-item-text">{{ $t("goveritemtext") }}</div>
            </div>
          </div>
        </div>
        <!-- 服务 -->
        <div class="gover">
          <div class="gover-title mt-20 mb-20">{{ $t("fuwutitle") }}</div>
          <div class="gover-list">
            <div class="gover-item">
              <div class="gover-item-logo">
                <img src="../assets/image/合作客户logo.png" alt="" />
              </div>
              <div class="gover-item-text">{{ $t("goveritemtext") }}</div>
            </div>
            <div class="gover-item">
              <div class="gover-item-logo">
                <img src="../assets/image/合作客户logo.png" alt="" />
              </div>
              <div class="gover-item-text">{{ $t("goveritemtext") }}</div>
            </div>
            <div class="gover-item">
              <div class="gover-item-logo">
                <img src="../assets/image/合作客户logo.png" alt="" />
              </div>
              <div class="gover-item-text">{{ $t("goveritemtext") }}</div>
            </div>
            <div class="gover-item">
              <div class="gover-item-logo">
                <img src="../assets/image/合作客户logo.png" alt="" />
              </div>
              <div class="gover-item-text">{{ $t("goveritemtext") }}</div>
            </div>
          </div>
        </div>
        <!-- 教育 -->
        <div class="gover">
          <div class="gover-title mt-20 mb-20">{{ $t("jiaoyutitle") }}</div>
          <div class="gover-list">
            <div class="gover-item">
              <div class="gover-item-logo">
                <img src="../assets/image/合作客户logo.png" alt="" />
              </div>
              <div class="gover-item-text">{{ $t("goveritemtext") }}</div>
            </div>
            <div class="gover-item">
              <div class="gover-item-logo">
                <img src="../assets/image/合作客户logo.png" alt="" />
              </div>
              <div class="gover-item-text">{{ $t("goveritemtext") }}</div>
            </div>
            <div class="gover-item">
              <div class="gover-item-logo">
                <img src="../assets/image/合作客户logo.png" alt="" />
              </div>
              <div class="gover-item-text">{{ $t("goveritemtext") }}</div>
            </div>
            <div class="gover-item">
              <div class="gover-item-logo">
                <img src="../assets/image/合作客户logo.png" alt="" />
              </div>
              <div class="gover-item-text">{{ $t("goveritemtext") }}</div>
            </div>
          </div>
        </div>
        <!-- 其他 -->
        <div class="gover">
          <div class="gover-title mt-20 mb-20">{{ $t("othertitle") }}</div>
          <div class="gover-list">
            <div class="gover-item">
              <div class="gover-item-logo">
                <img src="../assets/image/合作客户logo.png" alt="" />
              </div>
              <div class="gover-item-text">{{ $t("goveritemtext") }}</div>
            </div>
            <div class="gover-item">
              <div class="gover-item-logo">
                <img src="../assets/image/合作客户logo.png" alt="" />
              </div>
              <div class="gover-item-text">{{ $t("goveritemtext") }}</div>
            </div>
            <div class="gover-item">
              <div class="gover-item-logo">
                <img src="../assets/image/合作客户logo.png" alt="" />
              </div>
              <div class="gover-item-text">{{ $t("goveritemtext") }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 花点时间banner -->
    <div><img src="../assets/image/花点时间.png" alt="" /></div>
    <!-- links -->
    <links></links>
    <!-- footer -->
    <myfooter></myfooter>
    <!-- 侧边栏返回顶部 -->
    <returnTop></returnTop>
  </div>
</template>

<script>
import myfooter from "../components/myFooter.vue";
import links from "../components/links.vue";
import whiteNav from "../components/whiteNav.vue";
import returnTop from "../components/returnTop.vue";

export default {
  components: {
    whiteNav,
    myfooter,
    links,
    returnTop,
  },
  name: "cases",
  data() {
    return {
      // 全部列表
      alllist: [
        { name: "全部" },
        { name: "Web官网" },
        { name: "App应用" },
        { name: "小程序" },
        { name: "公众号" },
        { name: "安全案例" },
      ],
      // 全部列表active
      isalllistActive: "",
    };
  },
  methods: {
    handleAllList(index) {
      this.isalllistActive = index;
    },
  },
};
</script>

<style lang="less" scoped>
img {
  display: block;
  width: 100%;
}

// 移动端
@media (max-width: 768px) {
}

// pc端(大于768)
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
  // pc共用
  .dflex {
    display: flex;
  }
  .ml-20 {
    margin-left: 20px;
  }
  .mt-20 {
    margin-top: 10px;
  }
  .mb-20 {
    margin-bottom: 10px;
  }
  .single-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 271px;
  }

  //   全部列表
  .cases-biglist {
    width: 1200px;
    margin: 0 auto;
    background: #fff;
    padding: 30px 0;

    // 上部列表
    .alllist-top {
      display: flex;
      align-items: center;
      .alllist-item {
        border: 1px solid #ccc;
        padding: 5px 20px;
        color: #ccc;
        border-radius: 20px;
        text-align: center;
        margin-right: 20px;
        cursor: pointer;
      }
      .alllist-item-active {
        border: 1px solid orange;
        color: orange;
      }
    }
    // 下部图文
    .alllist-bottom {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin-top: 50px;
      .alllist-bottom-tuwen {
        width: 32.5%;
        margin-bottom: 20px;
        .tuwen-info {
          display: flex;
          border: 1px solid #ccc;
          border-top: 0;
          border-radius: 0 0 0 10px;

          padding: 20px;
          justify-content: space-between;
          align-items: center;

          .info-left {
            border: 1px solid #ccc;
            width: 80px;
            height: 70px;
            border-radius: 50%;
            margin-right: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            img {
              width: 50px;
              margin-left: 10px;
            }
          }
          .info-right {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .info-right-title {
              color: #000;
              font-size: 20px;
              margin-bottom: 10px;
            }
          }
        }
      }
    }
  }
  // 客户群体
  .groups {
    padding: 30px 0 60px 0;
    background: #f0f4f7;
    .groups-title {
      font-size: 26px;
      color: #000;
    }
    .iconshow {
      margin: 0 auto;
      width: 1200px;
      .gover-list {
        display: flex;
        flex-wrap: wrap;
        .gover-item {
          padding: 20px;
          width: 25%;
          border-right: 1px solid #ccc;
          border-top: 1px solid #ccc;
          border-bottom: 1px solid #ccc;
          background: #fff;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          .gover-item-logo {
            width: 200px;
          }
        }
        .gover-item:nth-child(1) {
          border-left: 1px solid #ccc;
        }
      }
    }
  }
}

// 大于992
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}

// 大于1200px
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}
</style>
